<template>
  <div class="studio-container">
    <div class="container-top">
      <span class="top-text-left">数字化创意设计工作室</span>
      <span class="top-text-right">Creative Design</span>
    </div>
    <div class="list-container">
      <div class="list-loading">
        <div class="article-list">
          <ul class="list-items">
            <li class="item">
              <div class="item-container">
                <div>
                  <i class="read-icon">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="read" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                      <path d="M928 161H699.2c-49.1 0-97.1 14.1-138.4 40.7L512 233l-48.8-31.3A255.2 255.2 0 0 0 324.8 161H96c-17.7 0-32 14.3-32 32v568c0 17.7 14.3 32 32 32h228.8c49.1 0 97.1 14.1 138.4 40.7l44.4 28.6c1.3.8 2.8 1.3 4.3 1.3s3-.4 4.3-1.3l44.4-28.6C602 807.1 650.1 793 699.2 793H928c17.7 0 32-14.3 32-32V193c0-17.7-14.3-32-32-32zM324.8 721H136V233h188.8c35.4 0 69.8 10.1 99.5 29.2l48.8 31.3 6.9 4.5v462c-47.6-25.6-100.8-39-155.2-39zm563.2 0H699.2c-54.4 0-107.6 13.4-155.2 39V298l6.9-4.5 48.8-31.3c29.7-19.1 64.1-29.2 99.5-29.2H888v488zM396.9 361H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5zm223.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c0-4.1-3.2-7.5-7.1-7.5H627.1c-3.9 0-7.1 3.4-7.1 7.5zM396.9 501H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5zm416 0H627.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5z">
                      </path>
                    </svg>
                  </i>
                  谭展鹏黄敏健广绣大师工作室
                </div>
                <div>
                  <div class="more">
                    <span>更多</span>
                    <i class="more-icon" aria-label="icon: right">
                      <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
                      </svg>
                    </i>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style lang="scss" scoped>
  .studio-container {
    width: 1100px;
    margin: auto;
    padding: 24px;

    .container-top {
      font-size: 20px;
      margin-bottom: 24px;

      .top-text-left {
        color: rgba(0, 0, 0, 0.6);
        margin-right: 20px;
        font-weight: 700;
      }

      .top-text-right {
        color: rgba(0, 0, 0, 0.6);
        font-size: 16px;
        padding: 4px 12px;
        background-color: #ffde7d;
        border-radius: 4px;
      }

      .top-text-right::before {
        content: "/";
        margin-right: 4px;
      }
    }

    .list-container {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(34,40,49,.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: "tnum","tnum";
      position: relative;
      * {
        outline: none;
      }
      .list-loading {
        position: relative;
        .article-list {
          position: relative;
          transition: opacity .3s;
          .list-items {
            margin: 0;
            padding: 0;
            list-style: none;
            .item {
              border-bottom: 1px solid #e8e8e8;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 12px 0;
              .item-container {
                display: flex;
                justify-content: space-between;
                transition: all .5s;
                width: 100%;
                padding: 8px 12px;
                font-weight: 700;
                border-radius: 10px;
                .read-icon {
                  margin-right: 20px;
                  display: inline-block;
                  color: inherit;
                  font-style: normal;
                  line-height: 0;
                  text-align: center;
                  text-transform: none;
                  vertical-align: -.125em;
                  text-rendering: optimizeLegibility;
                }
                .more {
                  cursor: pointer;
                  width: max-content;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.6);
                  .more-icon {
                    margin-left: 10px;
                    display: inline-block;
                    color: inherit;
                    font-style: normal;
                    line-height: 0;
                    text-align: center;
                    text-transform: none;
                    vertical-align: -.125em;
                    text-rendering: optimizeLegibility;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
